<template>
 <div >
   <header class="bar bar-nav" >
    <a class="button button-link button-nav pull-left" v-link="{path: '/user', replace: false}">
    <span class="icon icon-left"></span>
    </a>
    <h1 class="title">会员在线升级</h1>
  </header>
  <div class="content">
   <div>
   <img src="../../assets/img/2.jpg" class="img-responsive" >
   </div>
    <div class="card"> 
    <validator name="validation1" > 
    <div class="card-header">Step1-选择会员种类</div>
    <div class="card-content">
      <div class="card-content-inner" >
       <label><input type="radio" name="type"  v-validate:type="['required']" value='1' v-model="type">英盟MT<br></label>
       <label><input type="radio" name="type" v-validate:type="['required']" value='2' v-model="type">英盟ME<br></label>
       <label><input type="radio" name="type" v-validate:type="['required']" value="3" v-model="type">英盟PLUS<br></label>
      </div>
    </div>
    <div class="card-footer">
         <a  class='button button-success button-fill' v-link="{path: '/user/userupgrade-0', replace: false}"  >上一步</a>
         <a class='button button-success button-fill' v-link="{path: '/user/userupgrade-2', replace: false, query: {type: type}}" @click="doflag($validation1.invalid)">下一步</a>
    </div>
    </validator>
   </div>
</div>

</template>

<script>
import $ from 'zepto'
import VNav from '../../components/Nav'
import VButton from '../../components/Button'
import VIcon from '../../components/Iconfont'
import VTabs from '../../components/Tabs'
import VTab from '../../components/Tab'
import VLayer from '../../components/PullToRefreshLayer'
import VCardContainer from '../../components/Card'
import Card from '../../components/CardItem'
import validator from '../../validation'

export default {
  route: {
    canDeactivate (transition) {
      if (this.flag) {
        transition.abort()
        $.toast('选择类别')
        this.flag = false
      }
      transition.next()
    }
  },
  ready () {
    $.init()
  },
  data () {
    return {
      flag: false,
      type: 0
    }
  },
  computed: {
    length () {
      return this.tasks.length
    }
  },
  methods: {
    doflag (invalid) {
      this.flag = invalid
    }
  },
  components: {
    VNav,
    VButton,
    VIcon,
    VTabs,
    VTab,
    VLayer,
    VCardContainer,
    Card,
    validator
  }
}
</script>

<style scoped>
img{
 width:100%;
 height:6rem;
}
.card{
 margin:0px;
}
.card-header{
   color:black;
}
.card-content-inner{
  line-height:2rem;
  font-size:16px;
}

</style>
